<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 14:26:29
-->
<template>
  <!-- 1. 容器 -->
  <div ref="right2_container" style="height:100%"> </div>
</template>
<script>
// 2. 导入图表构造函数
import { Line  } from '@antv/g2plot';
import { get } from '../../../utils/request';
export default {
  data(){
    return{
      dd:[]
    }
  },
 async mounted() {
   await this.loaddata();
    // 4. 页面渲染的时候初始化图表
    this.initChart()
  },
  methods:{
   async loaddata(){
      let url ="/dashboard/queryMouthData"
      let resp = await get (url);
      this.dd = resp.data;
    },
    //3. 初始化图表
    initChart(){
      const data = this.dd;
      const line = new Line(this.$refs.right2_container, {
 
      data,
      xField: 'date',
      yField: 'value',
      seriesField: 'type',
      xAxis: {
      },
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
      },
    });
      line.render();
    }
  }
}
</script>